<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->

    <!--蓝鲸提供的公用样式库 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/bk.css" rel="stylesheet">
    <!--表依赖文件-->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bk-icon-2.0/iconfont.css" rel="stylesheet">
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>
    <!-- 数据埋点统计 -->
    <script src="http://magicbox.bk.tencent.com/static_api/analysis.js"></script>
</head>

<body>

    <table class="bk-table has-table-bordered bk-demo">
        <thead>
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>位置</th>
                <th>日期</th>
                <th>类型</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Ravi Kumar</td>
                <td>India</td>
                <td>23/12/2012</td>
                <td>Paid</td>
                <td>
                    <span class="fb bk-text-info">Active</span>
                </td>
                <td>
                    <a class="bk-icon-button bk-success bk-button-mini" title="成功">
                        <i class="bk-icon icon-check-1 bk-icon"></i>
                        <i class="bk-text">提交</i>
                    </a>
                    <a class="bk-icon-button bk-warning bk-button-mini" title="编辑">
                        <i class="bk-icon icon-edit bk-icon"></i>
                        <i class="bk-text">编辑</i>
                    </a>
                    <a class="bk-icon-button bk-danger bk-button-mini" title="关闭">
                        <i class="bk-icon icon-close bk-icon"></i>
                        <i class="bk-text">删除</i>
                    </a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>Ravi Kumar</td>
                <td>India</td>
                <td>23/12/2012</td>
                <td>Paid</td>
                <td>
                    <span class="fb bk-text-danger">Banned</span>
                </td>
                <td>
                    <a class="bk-icon-button bk-success bk-button-mini" title="成功">
                        <i class="bk-icon icon-check-1 bk-icon"></i>
                        <i class="bk-text">提交</i>
                    </a>
                    <a class="bk-icon-button bk-warning bk-button-mini" title="编辑">
                        <i class="bk-icon icon-edit bk-icon"></i>
                        <i class="bk-text">编辑</i>
                    </a>
                    <a class="bk-icon-button bk-danger bk-button-mini" title="关闭">
                        <i class="bk-icon icon-close bk-icon"></i>
                        <i class="bk-text">删除</i>
                    </a>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>Ravi Kumar</td>
                <td>India</td>
                <td>23/12/2012</td>
                <td>Paid</td>
                <td>
                    <span class="fb bk-text-success">Active</span>
                </td>
                <td>
                    <a class="bk-icon-button bk-success bk-button-mini" title="成功">
                        <i class="bk-icon icon-check-1 bk-icon"></i>
                        <i class="bk-text">提交</i>
                    </a>
                    <a class="bk-icon-button bk-warning bk-button-mini" title="编辑">
                        <i class="bk-icon icon-edit bk-icon"></i>
                        <i class="bk-text">编辑</i>
                    </a>
                    <a class="bk-icon-button bk-danger bk-button-mini" title="关闭">
                        <i class="bk-icon icon-close bk-icon"></i>
                        <i class="bk-text">删除</i>
                    </a>
                </td>
            </tr>
            <tr>
                <td>4</td>
                <td>Ravi Kumar</td>
                <td>India</td>
                <td>23/12/2012</td>
                <td>Paid</td>
                <td>
                    <span class="fb bk-text-success">Active</span>
                </td>
                <td>
                    <a class="bk-icon-button bk-success bk-button-mini" title="成功">
                        <i class="bk-icon icon-check-1 bk-icon"></i>
                        <i class="bk-text">提交</i>
                    </a>
                    <a class="bk-icon-button bk-warning bk-button-mini" title="编辑">
                        <i class="bk-icon icon-edit bk-icon"></i>
                        <i class="bk-text">编辑</i>
                    </a>
                    <a class="bk-icon-button bk-danger bk-button-mini" title="关闭">
                        <i class="bk-icon icon-close bk-icon"></i>
                        <i class="bk-text">删除</i>
                    </a>
                </td>
            </tr>
            <tr>
                <td>5</td>
                <td>Ravi Kumar</td>
                <td>India</td>
                <td>23/12/2012</td>
                <td>Paid</td>
                <td>
                    <span class="fb bk-text-danger">Banned</span>
                </td>
                <td>
                    <a class="bk-icon-button bk-success bk-button-mini" title="成功">
                        <i class="bk-icon icon-check-1 bk-icon"></i>
                        <i class="bk-text">提交</i>
                    </a>
                    <a class="bk-icon-button bk-warning bk-button-mini" title="编辑">
                        <i class="bk-icon icon-edit bk-icon"></i>
                        <i class="bk-text">编辑</i>
                    </a>
                    <a class="bk-icon-button bk-danger bk-button-mini" title="关闭">
                        <i class="bk-icon icon-close bk-icon"></i>
                        <i class="bk-text">删除</i>
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>